<template>
  <div>
    <p>Clicked count: {{ debounceFnValue }}</p>
    <button type="button" @click="debounceFnRun">useDebounceFn测试</button>
  </div>
  <div>
    <input
      v-model="debounceCurrValue"
      placeholder="Typed value"
      style="width: 280"
    />
    <p style="margintop: 16">DebouncedValue: {{ debounceValue }}</p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useDebounceFn } from '@/hooks/useDebounceFn'
import { useDebounce } from '@/hooks/useDebounce'

const debounceFnValue = ref<number>(1)
const { run: debounceFnRun } = useDebounceFn(() => {
  debounceFnValue.value++
}, 500)

const debounceCurrValue = ref(1)
const debounceValue = useDebounce(debounceCurrValue, 2000)
</script>
